<!--  -->
<template>
	<div class="">
		<el-form
			:inline="false"
			ref="ruleFormDesignTaskRef"
			style=""
			:model="formDesignTask"
			:rules="rulesDesignTask"
			label-width="auto"
			class="form-designtask"
			status-icon
			require-asterisk-position="left"
			size="small"
			:label-position="'left'"
		>
			<el-row>
				<el-col :span="8">
					<el-form-item label="任务标题" prop="name">
						<el-input class="txt" placeholder="请输入任务标题" />
					</el-form-item>
				</el-col>
				<el-col :span="8" :offset="6">
					<el-form-item label="任务类型" prop="name">
						<el-select class="txt" style="width: 100%" @change="handleTypeChange">
							<el-option
								v-for="taskTypeItem in taskTypeList"
								:key="taskTypeItem.key"
								:label="taskTypeItem.title"
								:value="taskTypeItem.key"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="责任人" prop="name">
						<el-select class="txt" style="width: 100%" />
					</el-form-item>
				</el-col>
				<el-col :span="8" :offset="6">
					<el-form-item label="完成时间" prop="name">
						<el-date-picker class="txt" style="width: 100%" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="组件" prop="name">
						<el-select class="txt" style="width: 100%" />
					</el-form-item>
				</el-col>
				<el-col :span="8" :offset="6">
					<el-form-item label="零件" prop="name">
						<el-select class="txt" style="width: 100%" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="22">
					<el-form-item label="技术要求" prop="name" style="">
						<el-input type="textarea" rows="5" style="" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="22">
					<el-form-item label="工作时间" prop="name" style="">
						<el-select style="width: 100%" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="开始日期" prop="name">
						<el-input />
					</el-form-item>
				</el-col>
				<el-col :span="8" :offset="6">
					<el-form-item label="结束日期" prop="name">
						<el-input class="txt" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="优先级" prop="name">
						<el-select class="txt" style="width: 100%">
							<el-option
								v-for="priorityListItem in priorityList"
								:key="priorityListItem.key"
								:label="priorityListItem.title"
								:value="priorityListItem.key"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="提醒" prop="name">
						<el-select class="txt" style="width: 100%" />
					</el-form-item>
				</el-col>
				<el-col :span="8" :offset="6">
					<el-form-item label="重复" prop="name">
						<el-select class="txt" style="width: 100%" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
	taskTypeList: {
		type: Array<{ key: ''; title: '' }>,
		default: [],
	},
});

const emits = defineEmits(['typeChange']);

const formDesignTask = reactive({});

const rulesDesignTask = reactive({
	name: {
		required: true,
		message: '必填',
	},
});

const priorityList = reactive([
	{ key: 'high', title: '高' },
	{ key: 'normal', title: '中' },
	{ key: 'low', title: '低' },
]);

//切换任务类型
const handleTypeChange = value => {
	emits('typeChange', value);
};
</script>
<style lang="scss">
.form-designtask {
}
.txt {
	// width: 80%;
}
</style>
